<template>
    <view style="background: url('@/static/imgs/loginBg.png') no-repeat; background-size: 100%">
        <view class="loginTitle">
            <text class="cl_00091A fw_bold" style="font-size: 48rpx">同路仁用户登录</text>
            <br />
            <!-- <text class="cl_999CA3 f_24">请先在用户端入驻成为商家</text> -->
        </view>
        <view class="login mt_40">
            <view class="loginText flex justify_content_between mt_32">
                <input style="width: 90%; height: 108rpx" class="f_28" type="text" v-model="value" placeholder="请输入手机号" />
                <image class="loginPassView mt_32" :src="url + 'delate.png'" mode="widthFix" @click="delate"></image>
            </view>
            <view class="loginText flex justify_content_between mt_32" v-if="LoginMethod == 0">
                <input style="width: 90%; height: 108rpx" class="f_28" v-model="passwords" type="password"  placeholder="请输入密码" />
                <image class="loginPassView mt_32" :src="icon" mode="widthFix" @click="showPassword"></image>
            </view>
            <view class="loginText flex justify_content_between mt_32" v-if="LoginMethod == 1">
                <input style="width: 70%; height: 108rpx" class="f_28" :type="type" v-model="codes" placeholder="验证码" />
                <!-- <text class="f_28 cl_3377FF" style="line-height: 108rpx" v-if="time > 0">{{ time }}s</text> -->
				<u-code :seconds="seconds" @end="end" @start="start" ref="uCode"
						@change="codeChange">
				</u-code>
                <text class="f_28 cl_3377FF" style="line-height: 108rpx"  @click="getCode()" >{{tips}}</text>
            </view>
            <view v-if="LoginMethod == 0" class="f_28 cl_3377FF mt_32" @click="LoginMethod = 1">验证码登录</view>
            <view v-if="LoginMethod == 1" class="f_28 cl_3377FF mt_32" @click="LoginMethod = 0">密码登录</view>
            <view class="loginBtn back_3377FF cl_fff" @click="isLogin">登录</view>
        </view>
		<view class="dfx_a_j_c mb-20" style="text-align: center;">
			<image class="bor-999" style="width:100rpx;height: 100rpx;" src="/static/imgs/wx2.png"
				 @click="wx_login"></image>
		</view>
        <view class="flex justify_content_center f_24 agreement">
            <u-checkbox-group shape="circle">
                <u-checkbox :customStyle="{ marginBottom: '8px' }"></u-checkbox>
            </u-checkbox-group>
            同意
            <text style="color: #3377ff">《同路仁用户协议》</text>
            &
            <text style="color: #3377ff">《隐私协议》</text>
        </view>
    </view>
</template>

<script>
import { loginApi } from '@/common/serve.js';
export default {
    data() {
        return {
            LoginMethod: 0, //0密码登录，1验证码登录
            url: '',
            type: 'password',
            icon: '@/static/imgs/show.png',
            value: '',
            time: '',
			passwords:'',
            checkboxValue1: [],
            checkboxList1: [
                {
                    name: '',
                    disabled: false
                }
            ],
			seconds:60,
			tips:'获取验证码',
			codes:'',
        };
    },
    onShow() {
        this.url = this.baseUrl + this.imgPath;
    },
    onLoad() {},
    methods: {
        checkboxChange(n) {
            console.log('change', n);
        },
        showPassword() {
            if (this.type == 'password') {
                this.type = 'text';
                this.icon = '@/static/imgs/hide.png';
            } else {
                this.type = 'password';
                this.icon = '@/static/imgs/show.png';
            }
        },
        delate() {
            console.log(111);
            this.value = '';
        },
        setTime() {
			
			
			
            let _this = this;
            _this.time = 90;
            let time = setInterval(() => {
                _this.time--;
                if (_this.time <= 0) {
                    clearInterval(time);
                }
            }, 1000);
        },
        isRouter(url) {
            this.$api.authTab(url);
        },
        isLogin() {
			
			if(this.LoginMethod!=1){
				
			
             if(!this.value){
				 this.$.ti_shi('请输入账号');
				 return;
			 }
			 if(!this.passwords){
					 this.$.ti_shi('请输入密码');
					 return;
			 }
           	 this.$.ajax(1,"POST","user/login",{
           	 	 account:this.value,
				 password:this.passwords
           	 },(res)=>{
           	 		if(res.code==200){
           	 			this.$.set_data("vuex_token", res.data.token)
           	 			this.$.ti_shi('登录成功');
           	 			setTimeout(() => {
           	 				uni.switchTab({
           	 					url: '/pages/home/home'
           	 				})
           	 			}, 1000);
           	 			
           	 		}else{
           	 		   this.$u.toast(res.msg);
           	 		}
           	 })
			 
			 }else{
				 if(!this.codes){
					 this.$.ti_shi('请输入验证码');
					 return;
				 }
				 
				 this.$.ajax(1,"POST","users/user_y_code",{
				 	 mobile:this.value,
				 	 code:this.codes,
				 	 is_type:'userlogin_mobile'
				 },(res)=>{
				 		if(res.code==200){
				 			this.$.set_data("vuex_token", res.data.token)
				 			this.$.ti_shi('登录成功');
				 			setTimeout(() => {
				 				uni.switchTab({
				 					url: '/pages/home/home'
				 				})
				 			}, 1000);
				 			
				 		}else{
				 		   this.$u.toast(res.msg);
				 		}
				 })
			 }
          
        },
		wx_login() {
			
			// if(!this.checkedss){
			// 	this.$.ti_shi('请勾选《用户协议》与《隐私协议》')
			// 	return;
			// }
			
			var that = this
			console.log(111,222)
			uni.login({
				"provider": "weixin",
				// "onlyAuthorize": true, // 微信登录仅请求授权认证
				success: function(event) {
					const {
						code
					} = event
					console.log(event)
					//客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
					that.$.ajax(1,"POST","/index/login",{
						code:event.code
					},(res)=>{
						console.log(res); 
						if(res.code == 200){
							that.$.set_data("vuex_token", res.data.token)
							that.$.ti_shi('登录成功');
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/home/home'
								})
							}, 1000);
						}else{
							that.$.ti_shi(res.message)
							
						}
					})
				},
				fail: function(err) {
					// 登录授权失败  
					// err.code是错误码
				}
			})
		},
        setPassword() {
            this.$refs.popup.open();
        },
        closePassword() {
            this.$refs.popup.close();
        },
        // 发送验证码
        getCaptcha() {
            let _this = this;
            let formData = this.forgetData;
            if (!formData.name) {
                _this.$api.msg('请输入真实姓名');
                return;
            }
            if (!formData.idcard) {
                _this.$api.msg('请输入身份证号码');
                return;
            }
            loginApi.teamsend({ name: formData.name, idcard: formData.idcard }).then((res) => {
                _this.$api.msg('发送成功');
                _this.setTime();
            });
        },
		codeChange(text) {
				   console.log(text)
							this.tips = text;
						},
						getCode() {
							if(!this.value){
								   this.$.ti_shi('请输入手机号！')
								   return;
							}
							this.code()
							if(this.$refs.uCode.canGetCode) {
								// 模拟向后端请求验证码
								uni.showLoading({
									title: '正在获取验证码'
								})
								setTimeout(() => {
									uni.hideLoading();
									// 这里此提示会被this.start()方法中的提示覆盖
									uni.$u.toast('验证码已发送');
									// 通知验证码组件内部开始倒计时
									this.$refs.uCode.start();
								}, 2000);
							} else {
								uni.$u.toast('倒计时结束后再发送');
							}
						},
						end() {
							uni.$u.toast('倒计时结束');
						},
						start() {
							uni.$u.toast('倒计时开始');
						},
						code(){
							this.$.ajax(1,"POST","sms/smscode",{
								mobile:this.value,
								event:'userlogin_mobile'
							},(res)=>{
							  if(res.code==200){
								    	
										
							  }else{
							     this.$.ti_shi(res.msg);
							  }
							})
						}
    }
};
</script>

<style scoped lang="scss">
.chek {
}
.loginTitle {
    padding: 240rpx 64rpx 8rpx;
}
.loginBg {
    width: 750rpx;
    height: 640rpx;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
}
.login {
    margin: 64rpx;
    .loginText {
        width: 562rpx;
        height: 108rpx;
        padding: 0 30rpx;
        border-radius: 100rpx;
        border: 2rpx solid #bed4ff;
        background: rgba(51, 119, 522, 0.1);
    }
    .loginBtn {
        width: 590rpx;
        height: 100rpx;
        line-height: 100rpx;
        text-align: center;
        border-radius: 60rpx;
        margin-top: 64rpx;
    }
    .loginPassView {
        width: 45rpx;
        height: 45rpx;
    }
}
.agreement {
    width: 100%;
    position: fixed;
    bottom: 80rpx;
}
</style>
